<template>
  <div class="shop-container">
    <header class="shop-header">
      <div class="logo">
        <a href="/shop">
          <img src="@/assets/images/xia-shop.png" alt="回到首页">
        </a>
      </div>
      <div class="search-bar">
        <el-input
            @keydown.enter.native="loadData"
            v-model="search"
            placeholder="请输入你搜索的商品关键词"
            prefix-icon="el-icon-search"
            clearable>
          <el-button slot="append" type="danger" @click="loadData">搜索</el-button>
        </el-input>
      </div>
    </header>

    <div class="products-grid">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in itemData" :key="item.id">
          <el-card class="product-card" shadow="hover">
            <a :href="'/shop/detail?id='+item.id" class="product-link">
              <div class="product-image">
                <img :src="item.image || hamburgUrl" :alt="item.title">
              </div>
              <div class="product-info">
                <h3 class="product-title">{{ item.title }}</h3>
                <p class="product-desc">{{ item.sellPoint }}</p>
                <div class="product-price">
                  <span class="price-symbol">¥</span>
                  <span class="price-value">{{ item.price }}</span>
                </div>
              </div>
            </a>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "ShopView",
  data() {
    return {
      // 查询的关键词
      search: '',
      // 收到的商品数据
      itemData: [],
      //汉堡Url
      hamburgUrl: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
    };
  },
  created() {
    this.loadData();
    document.title = "校园的二手商城系统"
  },
  methods: {
    loadData() {
      request.get('/item/getAll',{
        params: {
          search: this.search,
        }
      }).then(res => {
        this.itemData = res.data;
      })
    }
  }
}
</script>

<style scoped>
.shop-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.shop-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px 0;
}

.logo {
  margin-right: 40px;
}

.logo img {
  height: 50px;
}

.search-bar {
  flex: 1;
  max-width: 600px;
}

.products-grid {
  margin-top: 30px;
}

.product-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-link {
  text-decoration: none;
  color: inherit;
}

.product-image {
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  padding: 15px;
}

.product-title {
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

.product-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
  height: 40px;
  overflow: hidden;
}

.product-price {
  color: #ff5000;
  font-size: 20px;
  font-weight: bold;
}

.price-symbol {
  font-size: 14px;
  margin-right: 2px;
}
</style>